<template>
    <div class="index">
<!--      第二层router-view-->
      <router-view></router-view>
<!--      头部-->
      <ul class="nav" :class="{is_fixed:isFixed==true}">
        <li>
            <router-link to="#">喜马拉雅</router-link>
        </li>
        <li>
          <router-link to="/search_content">
            <p class="search" >
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-sousuo"></use>
              </svg>
              搜索
            </p>
          </router-link>
        </li>
        <li><button>打开APP</button></li>
      </ul>
<!--      导航栏-->
      <div class="navtab" :class="{is_display_none:isFixed}">
        <ul class="nav_tab">
          <li v-for="(item,index) in navlist" v-on:click="change(index)" v-bind:class="{current:index==msg}">
            <router-link to="/youshengshu">{{item.title}}</router-link>
<!--            {{item.title}}-->
          </li>
        </ul>
      </div>
<!--      排行榜 分类-->
      <div class="row">
        <div>
          <router-link to="/Two_hot">
            <img src="../../assets/images/wKgLgFyQujLCAVYRAAAuwA7DZMg198.png" alt="">
            <span>排行榜</span>
          </router-link>
        </div>
        <div>
          <router-link to="/">
            <img src="../../assets/images/wKgLgVyQuqWRZsJtAAAnr8tg4rs307.png" alt="">
            <span>听单</span>
          </router-link>
        </div>
        <div>
          <router-link to="/">
            <img src="../../assets/images/wKgLeVziZxHRlc-lAAAO9ZkPU-I489.png" alt="">
            <span>分类</span>
          </router-link>
        </div>
      </div>
      <img src="../../assets/images/wKgMZl0W1legiUgkAACPrBBFcJ4381.png" alt="">
      <ul class="cont_tab">
<!--        最新专辑-->
        <li>
          <div class="con_top">
              <p>最新专辑</p>
              <span>
                  更多
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-youjiantou"></use>
                </svg>
              </span>
          </div>
          <div class="cont" v-for="(item,index) in lastestlist">
            <div class="con_left" v-html="item.images">
<!--              {{item.images}}-->
            </div>
            <div class="con_right">
              <h2>{{item.title}}</h2>
              <span>{{item.des}}</span>
              <p>
                <span class="span_left">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-sound-wave"></use>
                  </svg>
                  {{item.comment}}
                </span>
                <span class="span_right">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-listen"></use>
                  </svg>
                  {{item.listen}}
                </span>
              </p>
            </div>
          </div>
        </li>
<!--        有声书-->
        <li>
          <div class="con_top">
            <p>有声书</p>
            <span>
                  更多
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-youjiantou"></use>
                </svg>
              </span>
          </div>
          <div class="cont" v-for="(item,index) in audiobook">
            <div class="con_left" v-html="item.images">
              <!--              {{item.images}}-->
            </div>
            <div class="con_right">
              <h2>{{item.title}}</h2>
              <span>{{item.des}}</span>
              <p>
                <span class="span_left">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-sound-wave"></use>
                  </svg>
                  {{item.comment}}
                </span>
                <span class="span_right">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-listen"></use>
                  </svg>
                  {{item.listen}}
                </span>
              </p>
            </div>
          </div>
        </li>
<!--        相声-->
        <li>
          <div class="con_top">
            <p>相声</p>
            <span>
                  更多
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-youjiantou"></use>
                </svg>
              </span>
          </div>
          <div class="cont" v-for="(item,index) in xiangsheng">
            <div class="con_left" v-html="item.images">
              <!--              {{item.images}}-->
            </div>
            <div class="con_right">
              <h2>{{item.title}}</h2>
              <span>{{item.des}}</span>
              <p>
                <span class="span_left">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-sound-wave"></use>
                  </svg>
                  {{item.comment}}
                </span>
                <span class="span_right">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-listen"></use>
                  </svg>
                  {{item.listen}}
                </span>
              </p>
            </div>
          </div>
        </li>
<!--        音乐-->
        <li>
          <div class="con_top">
            <p>音乐</p>
            <span>
                  更多
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-youjiantou"></use>
                </svg>
              </span>
          </div>
          <div class="cont" v-for="(item,index) in music">
            <div class="con_left" v-html="item.images">
              <!--              {{item.images}}-->
            </div>
            <div class="con_right">
              <h2>{{item.title}}</h2>
              <span>{{item.des}}</span>
              <p>
                <span class="span_left">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-sound-wave"></use>
                  </svg>
                  {{item.comment}}
                </span>
                <span class="span_right">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-listen"></use>
                  </svg>
                  {{item.listen}}
                </span>
              </p>
            </div>
          </div>
        </li>
<!--        儿童-->
        <li>
          <div class="con_top">
            <p>儿童</p>
            <span>
                  更多
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-youjiantou"></use>
                </svg>
              </span>
          </div>
          <div class="cont" v-for="(item,index) in children">
            <div class="con_left" v-html="item.images">
              <!--              {{item.images}}-->
            </div>
            <div class="con_right">
              <h2>{{item.title}}</h2>
              <span>{{item.des}}</span>
              <p>
                <span class="span_left">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-sound-wave"></use>
                  </svg>
                  {{item.comment}}
                </span>
                <span class="span_right">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-listen"></use>
                  </svg>
                  {{item.listen}}
                </span>
              </p>
            </div>
          </div>
        </li>
<!--        人文-->
        <li>
          <div class="con_top">
            <p>人文</p>
            <span>
                  更多
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-youjiantou"></use>
                </svg>
              </span>
          </div>
          <div class="cont" v-for="(item,index) in person">
            <div class="con_left" v-html="item.images">
              <!--              {{item.images}}-->
            </div>
            <div class="con_right">
              <h2>{{item.title}}</h2>
              <span>{{item.des}}</span>
              <p>
                <span class="span_left">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-sound-wave"></use>
                  </svg>
                  {{item.comment}}
                </span>
                <span class="span_right">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-listen"></use>
                  </svg>
                  {{item.listen}}
                </span>
              </p>
            </div>
          </div>
        </li>
<!--        情感-->
        <li>
          <div class="con_top">
            <p>情感</p>
            <span>
                  更多
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-youjiantou"></use>
                </svg>
              </span>
          </div>
          <div class="cont" v-for="(item,index) in mood">
            <div class="con_left" v-html="item.images">
              <!--              {{item.images}}-->
            </div>
            <div class="con_right">
              <h2>{{item.title}}</h2>
              <span>{{item.des}}</span>
              <p>
                <span class="span_left">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-sound-wave"></use>
                  </svg>
                  {{item.comment}}
                </span>
                <span class="span_right">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-listen"></use>
                  </svg>
                  {{item.listen}}
                </span>
              </p>
            </div>
          </div>
        </li>
<!--        历史-->
        <li>
          <div class="con_top">
            <p>历史</p>
            <span>
                  更多
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-youjiantou"></use>
                </svg>
              </span>
          </div>
          <div class="cont" v-for="(item,index) in history">
            <div class="con_left" v-html="item.images">
              <!--              {{item.images}}-->
            </div>
            <div class="con_right">
              <h2>{{item.title}}</h2>
              <span>{{item.des}}</span>
              <p>
                <span class="span_left">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-sound-wave"></use>
                  </svg>
                  {{item.comment}}
                </span>
                <span class="span_right">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-listen"></use>
                  </svg>
                  {{item.listen}}
                </span>
              </p>
            </div>
          </div>
        </li>
<!--        IT科技-->
        <li>
          <div class="con_top">
            <p>IT科技</p>
            <span>
                  更多
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-youjiantou"></use>
                </svg>
              </span>
          </div>
          <div class="cont" v-for="(item,index) in IT">
            <div class="con_left" v-html="item.images">
              <!--              {{item.images}}-->
            </div>
            <div class="con_right">
              <h2>{{item.title}}</h2>
              <span>{{item.des}}</span>
              <p>
                <span class="span_left">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-sound-wave"></use>
                  </svg>
                  {{item.comment}}
                </span>
                <span class="span_right">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-listen"></use>
                  </svg>
                  {{item.listen}}
                </span>
              </p>
            </div>
          </div>
        </li>
      </ul>
    </div>
</template>

<script>
    export default {
      // name: "index"
      data(){
        return{
          msg:0,
          isFixed:'',
          navlist:[],
          lastestlist:[],
          audiobook:[],
          xiangsheng:[],

          music:[],
          children:[],
          person:[],
          mood:[],
          history:[],
          IT:[]
        }
      },
      methods:{
        change(a){
          this.msg=a;
        },
        handleScroll() {
          // 滚动条偏移量
          let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
          // 要滚动到顶部吸附的元素的偏移量
          let offsetTop = document.querySelector('#app').offsetTop;
          // 如果滚动到顶部了，this.isFixed就为true
          this.isFixed = scrollTop > offsetTop ? true : false;
          // console.log('----------------')
          // console.log(this.isFixed);
          // console.log(scrollTop);
          // console.log(offsetTop);
        }
      },
      mounted() {
        var _this=this;
        this.$http.get('./data/index.json')
        .then((response)=>{
          //成功之后的
          // console.log(response);
          this.navlist=response.data.navlist;
          this.lastestlist=response.data.lastestlist;
          this.audiobook=response.data.audiobook;
          this.xiangsheng=response.data.xiangsheng;

          this.music=response.data.music;
          this.children=response.data.children;
          this.person=response.data.person;
          this.mood=response.data.mood;
          this.history=response.data.history;
          this.IT=response.data.IT;


          // console.log(response.data);
          // console.log(response.data.navlist);
          // console.log(this.lastestlist);
          // console.log(this.navlist);
          // console.log(this.children);

          // 监听滚动事件，然后用handleScroll这个方法进行相应的处理
          window.addEventListener('scroll',this.handleScroll)

        })
        .catch(function (err) {
          //失败的
          console.log(err);
        })
        .then(function () {
          //总会执行的
          //always executed
        })
      }
    }
</script>
<style scoped>
  .is_fixed{
    position: fixed;
    z-index: 2;
    width: 90%;
    background-color: #FFFFFF;
  }
  .is_display_none{
    display: none;
    /*height: 0;*/
    /*opacity: 0;*/
    /*transition: all 2s;*/
  }
  /*排行榜 听单 分类*/
  .row{
    /*height: 54px;*/
    padding: 10px 0;
    /*background-color: plum;*/
    display: flex;
    text-align: center;
    justify-content: space-around;
    font-size: 12px;
  }
  .row div{
    /*background-color: aquamarine;*/
    display: flex;
    flex-direction: column;
  }
  .row a{
    color: #666;
    text-decoration: none;
  }
  .row a span{
    display: block;
  }
  .row div img{
    width: 34px;
    height: 34px;
    margin: 1px auto;
  }
  /*广告图片*/
  .index>img{
    width: 100%;
    margin: 8px 0;
  }
  /*内容*/
  .cont_tab{
    width: 100%;
  }
  .cont_tab li{
    width: 100%;
    padding: 5px 0;
  }
  /*li的头部*/
  .con_top{
    display: flex;
    justify-content: space-between;
  }
  .con_top{
    padding: 10px 20px;
  }
  .con_top p{
    /*background-color: red;*/
    color: #333;
    font-weight: 700;
  }
  .con_top span{
    /*background-color: aquamarine;*/
    color: #72727b;
    font-size: 12px;
  }
  /*li的内容*/
  .cont{
    display: flex;
    /*align-items: center;*/
    padding: 0 20px;
    /*background-color: palevioletred;*/
    margin-bottom: 10px;
  }
  .con_left{
    width: 22%;
    display: flex;
    align-items: center;
    justify-content: center;
    /*background-color: #fa2800;*/
  }
  .con_right{
    /*border:1px solid blue;*/
    width: 70%;
    padding: 10px 0px 10px 10px
  }
  .con_right>h2{
    color: #333;
    font-size: 16px;
    line-height: 1.38;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .con_right>span{
    font-size: 13px;
    color: #999;
    line-height: 1.38;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
  }
  .con_right>p>span{
    font-size: 12px;
    color: #999;
  }
  .span_right{
    margin-left: 20px;
  }

  /*footer{*/
  /*  border-top: .5px solid #eee;*/
  /*  padding-bottom: 80px;*/
  /*  background: url("../../assets/images/footer_bg_2b1fa03.png") no-repeat;*/
  /*  background-size: 100% 100%;*/
  /*  text-align: center;*/
  /*}*/
  /*footer>span{*/
  /*  display: block;*/
  /*  width: 100%;*/
  /*  height: 40px;*/
  /*  background: url("../../assets/images/footer_logo_f90f028.png") no-repeat center;*/
  /*  background-size: 160px 40px;*/
  /*  margin: 34px auto 18px;*/
  /*}*/
  /*footer>a{*/
  /*  width: 292px;*/
  /*  height: 49px;*/
  /*  border-radius: 25px;*/
  /*  color: #fa2800;*/
  /*  padding: 15px 55px;*/
  /*  border: 1px solid #fa2800;*/
  /*}*/
  /*footer>a>span{*/
  /*  font-size: 18px;*/
  /*  font-family: PingFangHK-Regular,PingFangHK;*/
  /*  font-weight: 400;*/
  /*  color: #fa2800;*/
  /*  display: inline-block;*/
  /*  line-height: 50px;*/
  /*  margin-right: 8px;*/
  /*}*/
  /*footer>p{*/
  /*  font-size: 12px;*/
  /*  color: gray;*/
  /*}*/
  /*footer>p:nth-of-type(1){*/
  /*  margin-top: 15px;*/
  /*}*/
  /*footer>p:nth-of-type(2){*/
  /*  margin-bottom: 10px;*/
  /*}*/
  /*footer>div>a{*/
  /*  color: #40404c;*/
  /*  text-decoration: none;*/
  /*  !*background-color: palevioletred;*!*/
  /*  margin: 0 15px;*/
  /*  font-size: 13px;*/
  /*}*/
</style>
<style>
  /*内容图片*/
  .index .cont_img{
    width: 100%;
  }
</style>
